<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            text-decoration: none;
            outline: none;
            border: none;
        }

        body {
            display: flex;
        }

        .left-1 {
            width: 1200px;
            height: 961px;
            background-color: #00A7F2;
        }

        .left-1 .left-3 {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .left-1 .left-3 img {
            margin-top: 250px;
        }

        /* 右边栏 */
        .left-2 {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .left-2 .left-4 .left-51 {
            display: inline-block;
            width: 64px;
            height: 44px;
            line-height: 44px;
            color: #00BDFF;
        }

        .left-2 .left-4 .left-7 {
            display: inline-block;
            width: 64px;
            height: 44px;
            line-height: 44px;
        }

        .left-2 .left-4 .left-6 {
            display: inline-block;
            width: 2px;
            height: 12px;
            background-color: #eee;
        }

        .left-2 .left-5 {
            text-align: center;
        }

        .left-2 .left-5 .left-6 {
            width: 360px;
            height: 34px;
            border-bottom: 1px solid #e7e7e7;
        }

        .left-2 .left-5 .left-7 {
            width: 360px;
            height: 34px;
            border-bottom: 1px solid #e7e7e7;
        }

        .left-2 .left-8 {
            width: 360px;
            height: 52px;
            text-align: right;
            line-height: 52px;
            font-size: 15px;
            color: #00A7F2;
        }

        .left-2 .left-9 {
            width: 360px;
            height: 52px;
            text-align: center;
            line-height: 52px;
            background-color: #00A7F2;
            color: white;
        }

        .left-2 .left-10 {
            width: 360px;
            height: 52px;
            text-align: right;
        }

        .left-2 .left-10 span {
            display: inline-block;
        }

        .left-2 .left-10 span:nth-child(1) {
            color: #909090;
        }

        .left-2 .left-10 span:nth-child(2) a {
            color: #00A7F2;
        }

        .left-2 .left-10 span:nth-child(3) {
            background-image: url(./src/asset/images/loginIcon.png);
            width: 32px;
            height: 25px;
            background-position: -48px -27px;
            background-repeat: no-repeat;
        }

        .left-2 .pit-1 {
            width: 22px;
            height: 30px;
            background-image: url(./src/asset/images/loginIcon.png);
            background-repeat: no-repeat;
            display: block;
            background-position: -56px 1px;
            position: absolute;
            top: 406px;
            left: 150px;
        }

        .left-2 .pit-2 {
            width: 22px;
            height: 30px;
            background-image: url(./src/asset/images/loginIcon.png);
            background-repeat: no-repeat;
            display: block;
            background-position: -27px 1px;
            position: absolute;
            top: 444px;
            left: 150px;
        }

        /* text-indent: 10px;文字缩进 */
    </style>
</head>

<body>
    <div class="left-1">
        <a href="#" class="left-3"><img src="./src/asset/images/login-bg.png" alt=""></a>
    </div>
    <div class="left-2">
        <div class="left-3">
            <img src="./src/asset/images/new-logo-white2.png" alt="">
        </div>
        <div class="left-4">
            <span class="left-51">账号登录</span>
            <span class="left-6"></span>
            <span class="left-7">扫码登陆</span>
        </div>
        <div class="left-5">
            <input type="text" placeholder="用户名/手机号/邮箱" class="left-6">
            <input type="password" placeholder="密码" class="left-7">
        </div>
        <div class="left-8">
            <p>忘记密码</p>
        </div>
        <div class="left-9">
            <p>登录</p>
        </div>
        <div class="left-10">
            <span>还没有源码账号,</span>
            <span><a href="#">立即注册</a></span>
            <span>
            </span>
        </div>
        <span class="pit-1"></span>
        <span class="pit-2"></span>
    </div>
</body>

</html>